<template>
  <uni-popup ref="popup" type="center">
    <view class="popups">
      <view class="popups_list">
        <image :src="Starmap"></image>
        <view class="title">{{ explainAll.title }}</view>
        <view>{{ explainAll.content }}</view>
        <view @click="changes">{{ text }}</view>
      </view>
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
/**
 * @component
 * @desc vip价格说明弹框
 * @property {Object} explainAll 说明信息
 * @prop {String} explainAll.title 弹框标题
 * @prop {String} explainAll.content 弹框说明性文字
 */
import { authorMe } from '@/gql/user';
import { navTo } from '@/utils/navigator';
import { toPublish } from '@mqtt';
import { ref } from 'vue';
import { Starmap } from '@/utils/Static';
const props = defineProps({
  type: {
    type: Boolean,
    default: false,
  },
  union_id: {
    type: Number,
    default: 0,
  },
});

const explainAll = ref({}); //说明信息
const text = ref('');
// refs
const popup = ref(null);

/**
 * 获取说明文字
 */
function Springframe() {
  const payload = {
    query: authorMe,
    variables: {
      code: 'hyj',
    },
  };
  toPublish('ql/driver/getMyblock', payload, (obj: any) => {
    text.value = '去充值';
    const { get_myblock } = obj.data;
    explainAll.value = get_myblock;
    open();
  });
}
/**
 * 获取司机说明文字
 */
function FrameSpring() {
  const payload = {
    query: authorMe,
    variables: {
      code: props.union_id ? 'zxj' : 'customers',
    },
  };
  toPublish('ql/driver/getMyblock', payload, (obj: any) => {
    const { get_myblock } = obj.data;
    text.value = '我知道了';
    explainAll.value = get_myblock;
    open();
  });
}
function changes() {
  popup.value.close();
  if (text.value === '去充值') {
     navTo('mine/Recharge');
  }
}

function open() {
  popup.value.open();
}
function close() {
  popup.value.open();
}

defineExpose({
  open,
  close,
  Springframe,
  FrameSpring,
});
</script>

<style lang="less">
.popups {
  width: 90%;
  margin: 0px auto;
  padding-top: 150rpx;
  box-sizing: border-box;

  .popups_list {
    padding: 30rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: white;
    border-radius: 5px;

    image {
      width: 318rpx;
      height: 231rpx;
      margin-top: -150rpx;
    }

    .title {
      width: 60%;
      margin: 0px auto;
      text-align: center;
      font-size: 38rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #333333;
      margin-top: 32rpx;
    }

    view:nth-of-type(2) {
      margin-top: 48rpx;
      width: 100%;
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #9494a0;
      text-align: center;
    }

    view:nth-of-type(3) {
      width: 327rpx;
      height: 86rpx;
      border: 2rpx solid #ffbf49;
      border-radius: 5px;
      font-size: 36rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffbf49;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 81rpx;
      margin-bottom: 10rpx;
    }
  }
}
</style>
